<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>



</head>
<!-- 

1根据省data数据动态创建省的option  <option value="江西省">江西省</option>,加载到省select当中
2绑定省的下拉列表的onchange事件：事件逻辑是加载这个省城市city数据，
3.根据选定省城市的数据创建city的option,加载到城市的select当中。

 -->

<body>

    <select name="pro" id="pro"></select>
    <select name="city" id="city"></select>
    <script>
        var provs = [
            { name: "江西省", cities: ["南昌市", "景德镇", "九江", "鹰潭", "萍乡", "新馀", "赣州", "吉安", "宜春", "抚州", "上饶"] },
            { name: "福建省", cities: ["福州", "厦门", "莆田", "三明", "泉州", "漳州", "南平", "龙岩", "宁德"] },
            { name: "河北省", cities: ["石家庄", "邯郸", "邢台", "保定", "张家口", "承德", "廊坊", "唐山", "秦皇岛", "沧州", "衡水"] },
            { name: "四川省", cities: ["成都市", "自贡市", "攀枝花市", "泸州市", "德阳市", "绵阳市", "广元市", "遂宁市", "内江市", "乐山市", "南充市", "眉山市"] },
            { name: "山西省", cities: ["太原市", "大同市", "阳泉市", "长治市", "晋城市", "朔州市", "晋中市", "运城市", "忻州市", "临汾市", "吕梁市"] },
            { name: "山西省", cities: ["太原市", "大同市", "阳泉市", "长治市", "晋城市", "朔州市", "晋中市", "运城市", "忻州市", "临汾市", "吕梁市"] },
            { name: "内蒙古", cities: ["呼和浩特市", "包头市", "乌海市", "赤峰市", "通辽市", "鄂尔多斯市", "呼伦贝尔市", "巴彦淖尔市", "乌兰察布市", "兴安盟"] },
            { name: "海南省", cities: ["海口市", "三亚市"] },
            { name: "贵州省", cities: ["兰州市", "嘉峪关市", "金昌市", "白银市", "天水市", "武威市", "张掖市", "平凉市", "酒泉市"] },
            { name: "青海省", cities: ["西宁市", "海东地区", "海北藏族自治州", "黄南藏族自治州", "海南藏族自治州"] }
        ]
        let proSel = document.getElementById('pro')
        let citySel = document.getElementById('city')
        let fn = (data) => {
            if (data instanceof Object) {
                return ` <option value="${data.name}">${data.name}</option>`
            }
            return ` <option value="${data}">${data}</option>`

        }
        // let fn1=()
        // 根据省data数据动态创建省的option
        let htmlStr = ''
        provs.forEach(element => htmlStr += fn(element))  //element object
        proSel.innerHTML = htmlStr  

        let initCity = function () {
            // 1获取省option text值
            let selText = this.options[this.selectedIndex].text
            let selCity = provs.find(element => element.name === selText).cities

            let htmlStr1 = ''
            selCity.forEach(element => htmlStr1 += fn(element)) //element string
            citySel.innerHTML = htmlStr1

        }
        // 初始化city 手动传入 initCity中的this是proSel 不能proSel.initCity报错。不能proSel没有initCity方法
        initCity.call(proSel)
        // 绑定省的下拉列表的onchange事件：事件逻辑是加载这个省城市city数据，
        proSel.onchange = function () {
            initCity.call(this)
        }
        console.log(proSel.type)




    </script>
</body>

</html>